<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>修改个人资料</title>
	<link rel="stylesheet" href="css/weui.min.css" />
	<link rel="stylesheet" href="fonts/iconfont.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/weui.min.js"></script>
</head>
<style>
	.weui-loadmore {
		width: 100%;
		height: 100%;
		font-size: 14px;
		text-align: center;
		position: absolute;
		background: #fff;
		z-index: 999;
		color: #fff;
		margin: 0px;
		line-height: 300px;
	}

	.weui-loading {
		width: 40px;
		height: 40px;
	}
</style>

<body ontouchstart>
	<div class="loading" style="display:none;">
		<div class="weui-loadmore">
			<i class="weui-loading"></i>
		</div>
	</div>
	<div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">修改成功</p>
        </div>
    </div>
	<div class="weui-content">
		<div class="weui-cells">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
				<div class="weui-cell__bd"><input type="text" class="weui-input" id="customerName" /></div>
			</div>
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label class="weui-label">性别</label>
				</div>
				<div class="weui-cell__bd">
					<select name="gender" class="weui-select" id="gender">
						<option name="gender" value="男">男</option>
						<option name="gender" value="女">女</option>
					</select>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">手机</label></div>
				<div class="weui-cell__bd"><input type="tel" class="weui-input" id="phoneNumber" /></div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">邮箱</label></div>
				<div class="weui-cell__bd"><input type="email" class="weui-input" id="email" /></div>
			</div>
		</div>

		<div class="weui-content-padded">
			<input type="button" class="weui-btn weui-btn_primary" id="submit" value="保存">
		</div>
	</div>
</body>
<script src="./api.js"></script>
<script>
	let api = getApi()
	window.onload = function () {
		$('.loading').css('display', 'block');
		// 回显个人资料
		let userinfo = JSON.parse(localStorage.getItem('wxUserInfo')).data
		let token = userinfo.token
		let customerID = userinfo.customer.customerID

		fetch(api + '/customer/' + customerID, {
			method: "get",
			headers: {
				'Content-type': 'application/json',
				"Authorization": token
			}
		})
			.then(res => {
				if (res.status == 401) {
					alert('token过期，请重新登录')
					location.href = './index.html';
				}
				return res;
			})
			.then(res => res.json())
			.then((data) => {
				// let userMessage = data.data[0]
				let userInfo = data.data
				$('.loading').css('display', 'none');
				userInfo.customerName ? $('#customerName').val(userInfo.customerName) : $('#customerName').text('--')
				userInfo.gender ? $('#gender').val(userInfo.gender) : $('#gender').text('--')
				userInfo.phoneNumber ? $('#phoneNumber').val(userInfo.phoneNumber) : $('#phoneNumber').text('--')
				userInfo.email ? $('#email').val(userInfo.email) : $('#email').text('--')
			})

		$('#submit').on('click', function (event) {
			event.preventDefault()
			let customerName = $('#customerName').val()
			let gender = $('#gender option:selected').text()
			let phoneNumber = $('#phoneNumber').val()
			let email = $('#email').val()
			let data = {
				customerName: customerName,
				gender: gender,
				phoneNumber: phoneNumber,
				email: email,
				customerID: userinfo.customer.customerID

			}
			// 修改个人资料 
			let token = userinfo.token
			fetch(api + "/customer/edit", {
				method: "PUT",
				headers: {
					'Content-type': 'application/json',
					"Authorization": token
				},
				body: JSON.stringify(data)
			})
				.then(res => res.json())
				.then(data => {
					// window.location.href = 'userinfo.html'
					$('#toast').css('display', 'block')
					setTimeout(function(){
						$('#toast').css('display', 'none')
						window.location.href = 'home.html'
					},1000)
				})
		})
	}
</script>

</html>